<template>
  <div class="processflow-list">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>工艺流程列表</h2>
      <p>工艺流程信息查询与管理</p>
    </div>

    <!-- 操作按钮 -->
    <el-card class="action-card" shadow="never">
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增工艺流程
        </el-button>
        <el-button type="success" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="never">
      <el-table :data="tableData" v-loading="loading" stripe border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="processflowCode" label="工艺流程编码" width="150" />
        <el-table-column prop="processflowName" label="工艺流程名称" width="200" />
        <el-table-column prop="processCode" label="工序编码" width="150" />
        <el-table-column prop="processName" label="工序名称" width="200" />
        <el-table-column prop="user" label="负责人" width="100" />
        <el-table-column prop="deptName" label="部门" width="120" />
        <el-table-column prop="processCount" label="工序数量" width="100" />
        <el-table-column prop="state" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStateTagType(row.state)">
              {{ row.state === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isDelete" label="删除状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getIsDeleteTagType(row.isDelete)">
              {{ row.isDelete ? '已删除' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="描述" width="150" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="success" size="small" @click="handleEdit(row)" class="action-btn">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(row)" class="action-btn">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <div class="pagination-info">
          <span class="pagination-text">
            共 {{ pagination.totalCount }} 条记录，第 {{ pagination.currentPage }} / {{ pagination.totalPage }} 页
          </span>
        </div>
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50, 100]"
          :total="pagination.totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          class="pagination-wrapper"
        />
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editVisible"
      title="编辑工艺流程"
      width="600px"
      :before-close="handleEditClose"
    >
      <el-form
        ref="editFormRef"
        :model="editFormData"
        :rules="editFormRules"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="工艺流程编码" prop="ProcessflowCode">
          <el-input 
            v-model="editFormData.ProcessflowCode" 
            placeholder="工艺流程编码"
            :disabled="true"
          />
        </el-form-item>
        
        <el-form-item label="工艺流程名称" prop="ProcessflowName">
          <el-input 
            v-model="editFormData.ProcessflowName" 
            placeholder="请输入工艺流程名称"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item label="关联工序" prop="ProcessId">
          <el-select 
            v-model="editFormData.ProcessId" 
            placeholder="请选择关联工序" 
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="process in processList"
              :key="process.id"
              :label="`${process.processCode} - ${process.processName}`"
              :value="process.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleEditClose">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit" :loading="editLoading">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Edit, Delete, Plus, Download } from '@element-plus/icons-vue'
import { getReadClient, getWriteClient } from '@/Urls/AxiosHelper'
import { useRouter } from 'vue-router'

// 使用正确的客户端
const r3 = getReadClient(0) // 使用相对路径，通过Vite代理到localhost:5154
const w8 = getWriteClient(0) // 使用相对路径，通过Vite代理到localhost:5070

// 路由
const router = useRouter()

// 接口类型定义
interface ProcessFlow {
  id: number
  processflowCode: string
  processflowName: string
  processId: number
  isDelete: boolean
  processCode: string
  processName: string
  processTypeId: number
  user: string
  deptName: string
  state: number
  processCount: number
  desc: string
}

interface Process {
  id: number
  processCode: string
  processName: string
  processTypeId: number
  user: string
  deptName: string
  state: number
  processCount: number
  desc: string
  isDelete: boolean
}

interface ProcessFlowFormData {
  ProcessflowCode: string
  ProcessflowName: string
  ProcessId: number | null
  State: number
  Desc: string
}

interface ApiResponse {
  data: {
    totalCount: number
    totalPage: number
    data: ProcessFlow[]
  }
  code: number
  message: string
}

// 响应式数据
const loading = ref(false)
const tableData = ref<ProcessFlow[]>([])

// 编辑相关
const editVisible = ref(false)
const editLoading = ref(false)
const editFormRef = ref()
const currentEditItem = ref<ProcessFlow | null>(null)
const processList = ref<Process[]>([])

// 编辑表单数据
const editFormData = reactive({
  Id: 0,
  ProcessflowCode: '',
  ProcessflowName: '',
  ProcessId: null as number | null
})

// 编辑表单验证规则
const editFormRules = {
  ProcessflowName: [
    { required: true, message: '请输入工艺流程名称', trigger: 'blur' },
    { min: 2, max: 100, message: '工艺流程名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  ProcessId: [
    { required: true, message: '请选择关联工序', trigger: 'change' }
  ]
}


// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 5,
  totalCount: 0,
  totalPage: 0
})


// 获取工序列表
const fetchProcessList = async () => {
  try {
    const response = await r3.get('/sellreadapi/api/Processs/Processslist', {
      params: { pageindex: 1, pagesize: 1000 }
    })
    
    if (response.data.code === 200) {
      processList.value = response.data.data.data
    }
  } catch (error) {
    console.log('获取工序列表失败:', error)
  }
}

// 获取工艺流程列表数据
const fetchProcessFlowList = async () => {
  try {
    loading.value = true
    
    const params = {
      pageindex: pagination.currentPage,
      pagesize: pagination.pageSize
    }

    console.log('API请求参数:', params)
    console.log('使用的客户端:', r3.defaults.baseURL)
    
    const response = await r3.get<ApiResponse>('/sellreadapi/api/Processs/Processflowlist', { params })
    
    console.log('API响应数据:', response.data)
    
    // 根据实际API响应结构调整
    if (response.data && response.data.data) {
      // 过滤掉已删除的数据，只显示未删除的记录
      const allData = response.data.data.data || []
      tableData.value = allData.filter(item => !item.isDelete)
      pagination.totalCount = tableData.value.length
      pagination.totalPage = Math.ceil(tableData.value.length / pagination.pageSize)
      console.log('获取到的数据（已过滤删除记录）:', tableData.value)
    } else {
      ElMessage.error('获取工艺流程列表失败：响应数据格式错误')
    }
  } catch (error: any) {
    console.error('获取工艺流程列表失败:', error)
    ElMessage.error(`网络请求失败: ${error.message}`)
    // 添加模拟数据（只包含未删除的记录）
    const mockData = [
      {
        id: 1,
        processflowCode: 'CF-001',
        processflowName: '智能手机生产工艺',
        processId: 1,
        isDelete: false,
        processCode: 'GJ-001',
        processName: '香蕉自动削皮工序',
        processTypeId: 1,
        user: '李娜',
        deptName: '生产部',
        state: 1,
        processCount: 20,
        desc: '无'
      },
      {
        id: 2,
        processflowCode: 'CF-002',
        processflowName: '电动汽车电车组装工艺',
        processId: 2,
        isDelete: false,
        processCode: 'GJ-0032',
        processName: '苹果自动清洗工序',
        processTypeId: 2,
        user: '张三',
        deptName: '生产部',
        state: 1,
        processCount: 15,
        desc: '自动化清洗流程'
      }
    ]
    // 过滤掉已删除的数据
    tableData.value = mockData.filter(item => !item.isDelete)
    pagination.totalCount = tableData.value.length
    pagination.totalPage = Math.ceil(tableData.value.length / pagination.pageSize)
  } finally {
    loading.value = false
  }
}

// 分页大小改变
const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  pagination.currentPage = 1
  fetchProcessFlowList()
}

// 当前页改变
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  fetchProcessFlowList()
}

// 删除工艺流程
const handleDelete = async (row: ProcessFlow) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除工艺流程 "${row.processflowName}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await r3.get('/sellwriteapi/api/Pro/FlowDel', {
      params: { Id: row.id }
    })
    
    if (response.data.Code === 200) {
      ElMessage.success('工艺流程删除成功')
      fetchProcessFlowList()
    } else {
      ElMessage.error(response.data.Message || '删除失败')
    }
  } catch (error: any) {
    if (error.message === 'cancel') {
      ElMessage.info('已取消删除')
    } else {
      console.error('删除工艺流程失败:', error)
      ElMessage.error(`删除失败: ${error.message || '请检查网络或后端服务'}`)
    }
  }
}

// 编辑工艺流程
const handleEdit = (row: ProcessFlow) => {
  currentEditItem.value = row
  editFormData.Id = row.id
  editFormData.ProcessflowCode = row.processflowCode
  editFormData.ProcessflowName = row.processflowName
  editFormData.ProcessId = row.processId
  editVisible.value = true
}

// 关闭编辑对话框
const handleEditClose = () => {
  editVisible.value = false
  currentEditItem.value = null
  resetEditForm()
}

// 重置编辑表单
const resetEditForm = () => {
  editFormData.Id = 0
  editFormData.ProcessflowCode = ''
  editFormData.ProcessflowName = ''
  editFormData.ProcessId = null
  
  if (editFormRef.value) {
    editFormRef.value.clearValidate()
  }
}

// 提交编辑
const handleEditSubmit = async () => {
  if (!editFormRef.value) return
  
  try {
    await editFormRef.value.validate()
    editLoading.value = true
    
    const response = await w8.post('/sellwriteapi/api/Pro/FlowUpdate', editFormData)
    
    if (response.data.Code === 200) {
      ElMessage.success('工艺流程修改成功')
      editVisible.value = false
      resetEditForm()
      fetchProcessFlowList()
    } else {
      ElMessage.error(response.data.Message || '修改失败')
    }
  } catch (error: any) {
    console.error('修改工艺流程失败:', error)
    ElMessage.error('修改失败，请重试')
  } finally {
    editLoading.value = false
  }
}

// 新增工艺流程
const handleAdd = () => {
  // FlowAdd页面包含工艺管理添加功能
  // 使用 /api/Pro/ProAdd 接口添加工序
  // 使用 /api/Pro/FlowAdd 接口添加工艺流程
  router.push('/FlowAdd')
}


// 导出数据
const handleExport = async () => {
  try {
    // 动态导入xlsx库
    const XLSX = await import('xlsx')
    
    // 准备导出数据
    const exportData = tableData.value.map((item, index) => ({
      '序号': index + 1,
      'ID': item.id,
      '工艺流程编码': item.processflowCode,
      '工艺流程名称': item.processflowName,
      '工序编码': item.processCode,
      '工序名称': item.processName,
      '负责人': item.user,
      '部门': item.deptName,
      '工序数量': item.processCount,
      '状态': item.state === 1 ? '启用' : '禁用',
      '删除状态': item.isDelete ? '已删除' : '正常',
      '描述': item.desc
    }))

    // 创建工作表
    const worksheet = XLSX.utils.json_to_sheet(exportData)
    
    // 创建工作簿
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, '工艺流程列表')
    
    // 设置列宽
    const colWidths = [
      { wch: 8 },   // 序号
      { wch: 8 },   // ID
      { wch: 15 },  // 工艺流程编码
      { wch: 20 },  // 工艺流程名称
      { wch: 15 },  // 工序编码
      { wch: 20 },  // 工序名称
      { wch: 10 },  // 负责人
      { wch: 12 },  // 部门
      { wch: 10 },  // 工序数量
      { wch: 8 },   // 状态
      { wch: 10 },  // 删除状态
      { wch: 20 }   // 描述
    ]
    worksheet['!cols'] = colWidths
    
    // 生成文件名（包含当前日期）
    const now = new Date()
    const dateStr = now.getFullYear() + 
      String(now.getMonth() + 1).padStart(2, '0') + 
      String(now.getDate()).padStart(2, '0')
    const fileName = `工艺流程列表_${dateStr}.xlsx`
    
    // 导出文件
    XLSX.writeFile(workbook, fileName)
    
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败，请重试')
  }
}


// 获取状态标签样式
const getStateTagType = (state: number) => {
  return state === 1 ? 'success' : 'danger'
}

// 获取删除状态标签样式
const getIsDeleteTagType = (isDelete: boolean) => {
  return isDelete ? 'danger' : 'success'
}

// 组件挂载时获取数据
onMounted(() => {
  console.log('组件挂载，开始获取数据...')
  console.log('使用的客户端基础URL:', r3.defaults.baseURL)
  fetchProcessList()
  fetchProcessFlowList()
})
</script>

<style scoped>
.processflow-list {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e4e7ed;
}

.page-header h2 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 13px;
}

.table-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.pagination-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-text {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
}

/* 分页组件样式优化 */
:deep(.el-pagination) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

:deep(.el-pagination .el-pagination__total) {
  color: #606266;
  font-weight: 500;
}

:deep(.el-pagination .el-pagination__sizes) {
  margin-right: 16px;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 4px;
  transition: all 0.3s ease;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
}

:deep(.el-pagination .el-pager li:hover) {
  background-color: #f5f7fa;
  color: #409eff;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  color: white;
  border: none;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  border-radius: 4px;
  transition: all 0.3s ease;
  min-width: 28px;
  height: 28px;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  background-color: #f5f7fa;
  color: #409eff;
}

/* 表格样式优化 */
:deep(.el-table) {
  font-size: 13px;
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  color: #606266;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 0;
  border: none;
}

:deep(.el-table td) {
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
}

:deep(.el-table tbody tr:hover) {
  background-color: #f8f9fa;
}

:deep(.el-table tbody tr:last-child td) {
  border-bottom: none;
}

/* 按钮样式 */
:deep(.el-button) {
  border-radius: 4px;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}

/* 卡片样式 */
:deep(.el-card) {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

:deep(.el-card:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-card__body) {
  padding: 16px;
}

/* 详情页面样式 */
.detail-content {
  padding: 16px 0;
}

:deep(.el-descriptions) {
  margin-top: 20px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-tag) {
  font-weight: 500;
}

.dialog-footer {
  text-align: right;
}

/* 详情对话框样式 */
:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
  border-radius: 0 0 8px 8px;
}

/* 对话框按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.dialog-footer .el-button) {
  border-radius: 4px;
  padding: 8px 20px;
}

/* 操作按钮美化样式 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}

.action-btn {
  width: 65px;
  height: 26px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  padding: 0 6px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 编辑按钮样式 */
.action-btn.el-button--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  color: white;
}

.action-btn.el-button--success:hover {
  background: linear-gradient(135deg, #85ce61 0%, #67c23a 100%);
}

/* 删除按钮样式 */
.action-btn.el-button--danger {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  color: white;
}

.action-btn.el-button--danger:hover {
  background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
}

/* 按钮图标样式 */
.action-btn .el-icon {
  margin-right: 3px;
  font-size: 12px;
}

/* 表格操作列样式优化 */
:deep(.el-table .el-table__cell) {
  padding: 8px 0;
}

:deep(.el-table .el-table__cell:last-child) {
  background-color: #fafbfc;
}

/* 操作按钮区域样式 */
.action-card {
  margin-bottom: 16px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 新增按钮样式 */
.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.action-buttons .el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
}

.action-buttons .el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

/* 导出按钮样式 */
.action-buttons .el-button--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
}

.action-buttons .el-button--success:hover {
  background: linear-gradient(135deg, #85ce61 0%, #67c23a 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(103, 194, 58, 0.4);
}

.action-buttons .el-button--success:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-input__inner) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-select .el-input__inner) {
  border-radius: 6px;
}

:deep(.el-textarea__inner) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-textarea__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-radio-group) {
  display: flex;
  gap: 16px;
}

:deep(.el-radio) {
  margin-right: 0;
}

:deep(.el-radio__label) {
  font-weight: 500;
  color: #606266;
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  border-bottom: 1px solid #e4e7ed;
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
  font-size: 18px;
}

:deep(.el-dialog__body) {
  padding: 24px;
  background-color: #fafbfc;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  background-color: #f5f7fa;
  border-top: 1px solid #e4e7ed;
}

/* 对话框按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.dialog-footer .el-button) {
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.dialog-footer .el-button--primary) {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

:deep(.dialog-footer .el-button--primary:hover) {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
}
</style>
